body{
    background-color:rgb(233, 236, 229);    
    color:#3c403d;
    font-size:16px;
}

.body-content{    
    -webkit-box-shadow: 0px 0px 10px 1px rgba(186,189,183,0.3);
    -moz-box-shadow: 0px 0px 10px 1px rgba(186,189,183,0.3);
    box-shadow: 0px 0px 10px 1px rgba(186,189,183,0.3);
    width:80%;
    max-width:1024px;
    margin:60px auto;
    background-color:#fff;
    padding:8px; 
}

.body-inner-container{
    background-color:rgb(221, 226, 219);
    background: linear-gradient(90deg, rgba(221, 226, 219,1) 0%, rgba(207,215,204,1) 100%);
    padding:32px 32px 32px 32px;
    overflow:hidden;
}

.cube{
    background:url("../images/cube.jpeg") center center no-repeat;
    float:right;
    background-size:200px 200px;
}

h1{
    color:#3c403d;
    text-transform: uppercase;
    letter-spacing: 2.6;   
    text-align:center;
    margin-top:56px;

}

.subtitle{
    text-align:center;
    margin-bottom:72px;
}

.questions-container{
    margin-top:40px;
    line-height:1.5;
}

.question{
    margin-top:40px;
}

.question__title{
    color:#39603d;
    text-transform: uppercase;
    letter-spacing: 0.5;
    font-weight:bold;
}

.question__answer{
    margin-top:16px;
}

.results-button{
    color:#39603d;
    border: 2px solid #39603d;
    padding:8px 16px;
    text-transform: uppercase;
    letter-spacing: 1.8;
    background-color: rgb(221, 226, 219);
    font-weight:bold;
    font-size:12px;
    margin-top:40px;
    cursor:pointer;
}

.results-button--disabled{
    color:#a3bcb6;
    border: 2px solid #a3bcb6;
    cursor:text;
}

input[type="text"]{
    border: 2px solid #39603d;
    color: #39603d;
    padding:4px 8px;
    background-color: rgb(221, 226, 219);
    width:100px;
    max-width:80%;
    text-transform: uppercase;
    font-weight:bold;
}

input:focus{    
    color: #39603d;
}

img{
    margin: 8px 0;
}

.test-result{
    margin: 32px 0 32px 0;
}

@media (max-width:760px){
    .body-inner-container{
        padding:10%;
    }
}